/* @import "https://fonts.google.com/css?family=Roboto:300,300,500,600,700,800,900"; */

@ContainerWidth: 1000px;
@ContainerHeight: 600px;
@ClockDiameter: 300px;
@TimeFontSize: 52px;
@BtnFontSize:50px;
@mainColor:#a18cd1;
@secondColor:#fbc2eb;

body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-color: #eee;
    background-image: linear-gradient(to top, @mainColor 0%, @secondColor 100%);
    // background-image: linear-gradient(53deg, #6328a0, #945aa0, #bd8b9e, #e2be99);
}


.header {
    position: fixed;
    width: 100%;
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
    display: flex;
    /* 让元素左右两边排放，再平分中间区域 */
    justify-content: space-between;
    /* 侧轴元素对齐方式 - 居中 */
    align-items: center;
    z-index: 2;
}

.header ul {
    display: flex;
    /* 主轴元素对齐方式 - 居中 */
    justify-content: center;
    /* 侧轴元素对齐方式 - 居中 */
    align-items: center;
    margin: 0;
}

.header ul .logo {
    display: flex;
    align-items: center;
    margin: 10px 15px;
    margin-right: 30px;
    width: 60px;
    height: 60px;
}

.header ul li {
    margin: 0 15px;
}

.header ul li div {
    padding: 10px 30px;
    border-radius: 50px;
}

.header .loop {
    display: flex;
    align-items: center; 
    margin: 20px;
}

.header .loop span {
    margin: 0 5px;
}

.header .loop .icon{
    font-size: 30px;
}


.header .loop .text{
    font-weight: 700;
}

.container {
    display: flex;
    align-items: center;  // 让里面的内容居中
    position: relative;
    height: @ContainerHeight;
    width: @ContainerWidth;
    display: flex;
    justify-content: space-around;
    margin: auto;
}


.clock {
    display: flex;
    justify-content: center;
    position: relative;
    width: @ClockDiameter;
    height: @ClockDiameter;
    border-radius: 50%;
    box-shadow: 0 0 15px #fff;
    background: rgba(255, 255, 255, .3);
}

.pause,.terminate {
    font-size: @BtnFontSize;
    width: @ClockDiameter;
    height: @ClockDiameter;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}



svg {
    display: flex;
    position: relative;
    width: @ClockDiameter;
    height: @ClockDiameter;
    transform: rotate(-90deg);
}

svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #fff;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 1250;
    stroke-dashoffset:1000;  // 340 完全闭合 1250 空
    stroke:  @mainColor;
    opacity: 0.6;
}


.clock .start,.time {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    color:  #fff;
}

.clock .start {
    font-size: @BtnFontSize;
    z-index: 1;
}

.clock .time span {
    font-size: @TimeFontSize;
}

[class*="button"],[class*="checkbox"],[class*="selection"] {
    cursor: pointer;
}

[class*="button"]:hover,[class*="checkbox"]:hover,[class*="selection"]:hover {
    color: @mainColor;
}

[class*="button"]:active,[class*="checkbox"]:active,[class*="selection"]:active {
    color: @mainColor;
    opacity: 0.8;
}

[class*="icomoon"] {
    font-family: 'icomoon';
}


